import React, { useState } from 'react'
import { Input, Button, List, Divider } from 'antd'
import '../styles/todo.css'
import store from '../store'

function Todolist(props) {
  const [{list}, setList] = useState(store.getState())

  const changeValue = e => {
    const action = {
      type: 'CHANGE_INPUT',
      value: e.target.value
    }
    store.dispatch(action)
  }
  return (
    <div className="todo">
      <div className="container">
        <Input 
          style={{width: '300px'}} 
          placeholder="输入内容"
          onChange={changeValue}
        />
        <Button>ADD</Button>
      </div>
      <div className="list">
        <List
          bordered
          dataSource={list}
          renderItem={item => (
            <List.Item>
              {item}
            </List.Item>
          )}
        />
        <Divider/>
      </div>
    </div>
  )
}

export {Todolist};